<template>
  <div class="app-item-contain course-ware-contain">
    <div class="course-index-header">
      <div class="item-contain">
        <el-form-item label="课程分类：">
          <!-- <span class="title">课程分类：</span> -->
          <div class="data-select">
            <el-tree-select
              :props="defaultProps"
              node-key="id"
              v-model="sortItem"
              :data="publicityArchiveIdList"
              check-strictly
              :render-after-expand="true"
              default-expand-all
              placeholder="课程分类"
              style="margin-top: -5px"
              @change="sortChange"
            />
            <!-- <el-radio-group v-model="queryParam.applyArchiveId">
            <el-radio
              v-for="item in applyArchiveList"
              :key="item.id"
              :label="item.id"
              @click.prevent="applyArchiveChange(item.id)"
              >{{ item.name }}
            </el-radio>
          </el-radio-group> -->
          </div>
        </el-form-item>
        <div>
          <el-form-item label="培训名称:">
            <el-input
              v-model="queryParam.name"
              placeholder="请输入培训名称"
              clearable
              @input="trainInputChange"
          /></el-form-item>
        </div>
      </div>
    </div>

    <div class="course-index-content">
      <div class="course-card-contain" v-loading="listLoading">
        <none-show v-if="trainNoneShow" />
        <router-link
          v-for="item in tableData"
          :key="item.id"
          :to="{ path: '/corporatePromotion/detail', query: { id: item.id } }"
          class="urlLink"
        >
          <el-card class="course-card" shadow="hover">
            <img
              class="course-image"
              :src="getCourseCoverImg(item.coverPath)"
            />
            <div class="course-name">
              {{ item.name }}
            </div>
            <div class="course-child-item">
              共{{ item.itemCount }}节 | {{ item.studyTimeStr }}
            </div>
            <div class="course-foot">
              <img class="image-eye" src="@/assets/common/watch-eye.png" />
              <span class="course-watch-count" style="margin-left: 3px">{{
                item.clicks == undefined ? 0 : item.clicks
              }}</span>
              <router-link
                :to="{
                  path: '/corporatePromotion/statistics',
                  query: { id: item.id }
                }"
                class="urlLink"
              >
                <el-button
                  type="primary"
                  size="small"
                  text
                  style="font-size: 12px; margin-left: 10px"
                  ><el-icon><Histogram /></el-icon>统计</el-button
                >
              </router-link>
            </div>
          </el-card>
        </router-link>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParam.pageIndex"
      v-model:limit="queryParam.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import { list, page } from '@/api/corporatePromotion';
import coverImg from '@/assets/none.png';
export default {
  name: 'trainIndex',
  data() {
    return {
      defaultProps: {
        value: 'id',
        children: 'child',
        label: 'name'
      },
      queryParam: {
        publicityArchiveId: null,
        name: null, //培训名称
        pageIndex: 1,
        pageSize: 10
      },
      listLoading: true,
      tableData: [],
      total: 0,
      publicityArchiveIdList: [],
      trainNoneShow: false,
      sortItem: null
    };
  },
  created() {
    list().then(re => {
      this.publicityArchiveIdList = re.response;
      this.sortItem = re.response[0].id;
    });

    this.search();
  },
  methods: {
    //分类改变回调
    sortChange(val) {
      this.trainArchiveChange(val);
    },
    getCourseCoverImg(cover) {
      return cover != undefined ? cover : coverImg;
    },
    trainArchiveChange(id) {
      if (id === this.queryParam.publicityArchiveId) {
        this.queryParam.publicityArchiveId = null;
      } else {
        this.queryParam.publicityArchiveId = id;
      }
      this.search();
    },
    search() {
      this.listLoading = true;
      page(this.queryParam)
        .then(data => {
          const re = data.response;
          this.tableData = re.list;
          this.total = re.total;
          this.trainNoneShow = this.total === 0;
          this.queryParam.pageIndex = re.pageNum;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    //培训名称更改
    trainInputChange(val) {
      this.search();
    }
  }
};
</script>
